<template>
    <basic-container>
        <avue-crud :option="tableOption"
                   :data="tableData"
                   ref="crud"
                   v-model="tableForm"
                   :permission="permissionList"
                   :before-open="beforeOpen"
                   @row-save="rowSave"
                   @row-update="rowUpdate"
                   @row-del="rowDel"
                   @search-change="searchChange"
                   @refresh-change="searchChange">
            <template slot="icon"
                      slot-scope="scope">
                <div style="text-align:center">
                    <i :class="scope.row.icon"></i>
                </div>
            </template>
            <template slot="menuType"
                      slot-scope="scope">
                <el-tag :type="scope.dic[scope.row.menuType].type">{{scope.label}}</el-tag>
            </template>
            <template slot="hideFlag"
                      slot-scope="scope">
                <el-tag v-if="scope.row.menuType!=2" :type="scope.row.hideFlag==0?'success':'danger'">
                    {{scope.label}}
                </el-tag>
            </template>
            <template slot-scope="scope" slot="menu">
                <el-button v-if="scope.row.menuType!==2" icon="el-icon-plus" type="text" size="mini"
                           @click="saveSubMenu(scope.row)">新增下级
                </el-button>
            </template>
        </avue-crud>
    </basic-container>
</template>
<script>
    import {mapGetters} from "vuex";
    import {list, save, updateById, removeById} from "@/api/sys/sysMenu";
    import {tableOption} from '@/const/sys/sysMenu';
    import {treeDataTranslate} from '@/util/util';

    export default {
        data() {
            return {
                tableForm: {
                    parentId: null,
                    menuType: null,
                    sortNum: 0
                },
                tableOption: tableOption,
                tableData: [],
                parentDic: []
            };
        },

        watch: {
            'tableForm.menuType'(val) {
                let iconIndex = this.$refs.crud.findColumnIndex('icon');
                let pathIndex = this.$refs.crud.findColumnIndex('path');
                let permsIndex = this.$refs.crud.findColumnIndex('perms');
                let hideFlagIndex = this.$refs.crud.findColumnIndex('hideFlag');
                //刷新上级菜单字典
                let parentIdIndex = this.$refs.crud.findColumnIndex('parentId');
                switch (val) {
                    case 0:
                        this.tableOption.column[iconIndex].display = true;
                        this.tableOption.column[pathIndex].display = false;
                        this.tableOption.column[pathIndex].rules = [];
                        this.tableOption.column[permsIndex].display = false;
                        this.tableOption.column[permsIndex].rules = [];
                        this.tableOption.column[hideFlagIndex].display = false;
                        this.tableOption.column[parentIdIndex].dicData = this.parentDic;
                        break;
                    case 1:
                        this.tableOption.column[iconIndex].display = true;
                        this.tableOption.column[pathIndex].display = true;
                        this.tableOption.column[pathIndex].rules = [{
                            required: true,
                            message: "路径不能为空",
                            trigger: "blur"
                        }];
                        this.tableOption.column[permsIndex].display = false;
                        this.tableOption.column[permsIndex].rules = [];
                        this.tableOption.column[hideFlagIndex].display = true;
                        this.tableOption.column[parentIdIndex].dicData = this.parentDic;
                        break;
                    case 2:
                        this.tableOption.column[iconIndex].display = false;
                        this.tableOption.column[pathIndex].display = false;
                        this.tableOption.column[pathIndex].rules = [];
                        this.tableOption.column[permsIndex].display = true;
                        this.tableOption.column[permsIndex].rules = [{
                            required: true,
                            message: "权限标识不能为空",
                            trigger: "blur"
                        }];
                        this.tableOption.column[hideFlagIndex].display = false;
                        this.tableOption.column[parentIdIndex].dicData = this.tableData;
                        break;
                }
            }
        },
        created() {
            this.list();
        },
        computed: {
            ...mapGetters(["permission"]),
            permissionList() {
                return {
                    viewBtn: this.vaildData(this.permission['sys:menu:list'], false),
                    addBtn: this.vaildData(this.permission['sys:menu:save'], false),
                    editBtn: this.vaildData(this.permission['sys:menu:update'], false),
                    delBtn: this.vaildData(this.permission['sys:menu:delete'], false)
                };
            },
        },
        methods: {
            list() {
                list().then(res => {
                    let parentDic = this.deepClone(res.data).filter((item) => {
                        return item.menuType === 0;
                    });
                    parentDic.push({id: '0', parentId: '-1', menuName: '顶级目录', menuType: 0})
                    this.parentDic = treeDataTranslate(parentDic);
                    this.tableData = treeDataTranslate(res.data);

                });
            },
            rowSave(row, done, loading) {
                save(row).then(() => {
                    this.$message({
                        message: '操作成功',
                        type: 'success',
                    });
                    this.list();
                    done();
                }).catch(() => {
                    loading();
                });
            },
            rowUpdate(row, index, done, loading) {
                updateById(row).then(() => {
                    this.$message({
                        message: '操作成功',
                        type: 'success',
                    });
                    this.list();
                    done();
                }).catch(() => {
                    loading();
                });
            },
            rowDel(row) {
                this.$confirm("确定将选择数据删除?", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                })
                    .then(() => {
                        return removeById(row.id);
                    })
                    .then(() => {
                        this.$message({
                            type: "success",
                            message: "操作成功!"
                        });
                        this.list();
                    });
            },
            saveSubMenu(row) {
                /*let parentIdIndex = this.$refs.crud.findColumnIndex('parentId');
                this.tableOption.column[parentIdIndex].dicData = this.parentDic;*/
                if (row.menuType === 0) {
                    //目录
                    this.tableForm.menuType = 1;
                }
                if (row.menuType === 1) {
                    //菜单
                    this.tableForm.menuType = 2;
                }
                this.tableForm.parentId = row.id;
                this.$refs.crud.rowAdd();
            },
            searchChange() {
                this.list();
            },
            refresh() {
                this.listPage();
            },
            beforeOpen(done, type) {
                if (type === 'add' && !this.tableForm.menuType) {
                    this.tableForm.menuType = 0;
                }
                done();
            },
        }
    };
</script>


<style>
</style>
